html,body{
    width: 100%;
    height: 100%;
    padding : 0;
    margin : 0;
}
#container{
    width: 100%;
    height: 100%;
    overflow: hidden;
    perspective : 2000px;
    min-width: 1300px;
}
.page{
    background-color:white;
    position : absolute;
    width: 100%;
    height: 100%;
    opacity : 0;
}
.curPage{
    opacity : 1;
    z-index: 10;
}
.page iframe{
    width: 100%;
    height: 100%;
    overflow : hidden;
}
.pt-page-rotateSlideOut {
    -webkit-animation: rotateSlideOut 1s both ease;
    -moz-animation: rotateSlideOut 1s both ease;
    animation: rotateSlideOut 1s both ease;
}
.pt-page-rotateSlideIn {
    -webkit-animation: rotateSlideIn 1s both ease;
    -moz-animation: rotateSlideIn 1s both ease;
    animation: rotateSlideIn 1s both ease;
}
@keyframes rotateSlideOut {
    25% { opacity: .5; transform: translateZ(-500px); }
    75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
    100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
}
@keyframes rotateSlideIn {
    0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
    75% { opacity: .5; transform: translateZ(-500px); }
    100% { opacity: 1; transform: translateZ(0) translateX(0); }
}


#icon-cat{
    position: fixed;
    top:300px;
    margin-left: 40px;
    z-index: 200;
}
#cat-img{
    position: relative;
    width: 180px;
    height: 180px;
    border: 2px solid #cccccc;
    background-color: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% 50% 3% 50% ;
}
#cat-img img{
    position:absolute;
    width:155px;
    height: 155px;
    border-radius: 50%;
}
#cat-img:hover{
    background-color: #ffffff;
}
.icon {
    position: absolute;
    width: 1em;
    height: 1em;
    font-size: 24px;
    transform: rotate(-45deg);
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    right: 8px;
    bottom: 8px;
    color: #4d415c;
}
#cat-description span{
    cursor: pointer;
    display: block;
    color: #778680;
    font-size: 20px;
    font-weight: bolder;
    font-family: "blog_en_style", sans-serif;
}
#cat-description ul{
    list-style : none;
    margin : 5px 0 0 0;
    padding:0 0 0 15px;
}
#cat-description ul li{
    float : left;
    padding : 1px 6px;
    margin : 0 2px;
    border-radius : 5px;
}
#cat-description ul li a{
    text-decoration : none;
}
.cur{
    background-color : #e3a9a9;
}
#cat-description .cur span {
    color: #383737;
}
@keyframes cat {
    0%{ transform: translate(0); }
    100%{ transform: translate(calc(-100% - 40px)) rotate(-45deg); }
}
@keyframes cat-desc {
    0%{
        transform: translate(0);
        opacity: 1;
    }
    100%{
        transform: translate(-100%);
        opacity: 0;
    }
}
@keyframes cat-res {
    0%{ transform: translate(calc(-100% - 40px)) rotate(-45deg);  }
    100%{transform: translate(0); }
}
@keyframes cat-desc-res {
    0%{
        transform: translate(-100%);
        opacity: 0;
    }
    100%{
        transform: translate(0);
        opacity: 1;
    }
}
